<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>试题分析</span>
        <el-button v-if="searchTerms.examId" type="success" class="bg-green" size="small" style="float: right;" @click="toExport">导出数据</el-button>
      </div>
      <div class="header">
        <el-select v-model="searchTerms.examId" placeholder="请选择考试" class="select" clearable @change="getData">
          <el-option v-for="item in examList" :key="item.id" :value="item.id" :label="item.name"/>
        </el-select>
        <el-select v-model="searchTerms.type" placeholder="显示类型" class="select" clearable @change="getData">
          <el-option :value="1" label="列表"/>
          <el-option :value="2" label="饼状图"/>
        </el-select>
      </div>
      <div v-for="(item,index) in chartData" :key="item.id" class="content margin-top-20">
        <div class="title">{{ index+1 }}. {{ item.name }}（{{ item.type===1?'单选':item.type===2?'多选':'填空题' }}）</div>
        <div class="value">
          <el-table v-loading="tableLoading" v-if="searchTerms['type']===1||item.type===3" :data="item['option']" :max-height="tableMaxHeight" @sort-change="handleSortChange">
            <el-table-column label="选项" width="100">
              <template slot-scope="scope">
                {{ item.type===3 ? (scope.$index+1) : scope.row.label }}
              </template>
            </el-table-column>
            <el-table-column prop="value" label="内容" min-width="160"/>
            <el-table-column prop="number" label="小计" width="140" header-align="center" align="center"/>
            <el-table-column v-if="item.type!==3" prop="choice" label="百分比" width="140" header-align="center" align="center"/>
          </el-table>
          <pie-chart v-if="searchTerms['type']===2&&item.type!==3" :chart-data="item.chartData" class="margin-top-20"/>
        </div>
      </div>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>
  </div>
</template>

<script>
import PieChart from './components/PieChart'
import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '@/utils/table'
export default {
  components: {
    PieChart
  },
  data() {
    return {
      searchTerms: {
        type: 1,
        examId: ''
      },

      // 考试列表
      examList: [],
      chartData: [],

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 380,
      tableLoading: false,
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 50, 100],
      total: 0
    }
  },
  watch: {},
  created() {
    this.getExamList();
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
    getData() {
      if (this.searchTerms.examId) {
        this.tableLoading = true
        const url = 'exam/examAnalyse'
        const data = {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          id: this.searchTerms.examId,
          type: this.searchTerms.type
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.total = res.data.total;
          this.chartData = res.data.rows
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      }
    },

    // 获取考试列表
    getExamList() {
      const url = 'exam/itemListNoPage'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.examList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    /**
       *  增加题目
       *  接口:'user/all-list'
       */
    toAddQuestion() {
      this.form['question'].reverse()
      this.form['question'].push({
        title: '',
        type: 0,
        questionType: 0,
        optionsType: 0,
        options: [{ value: '' }]
      })
      this.form['question'].reverse()
    },

    toAddQuestionOptions(index) {
      this.form['question'][index]['options'].push({ value: '' })
    },

    toDeleteQuestionOptions(index, optionsIdx) {
      this.form['question'][index]['options'].splice(optionsIdx, 1)
    },

    toDeleteQuestion(index) {
      this.form['question'].splice(index, 1)
    },

    /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
    getUsersList() {
      const url = 'user/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.usersList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    toExport(){
      this.downloadLoading = true;
      window.open(`${this.$store.getters.serverUrl}/admin/exam/examAnalyseToExcel?token=${this.$store.getters.token}&id==${this.searchTerms.examId}&mallId=${this.$store.getters.SaaSId}`)
      this.downloadLoading = false;
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .header {
      padding-bottom: 15px;

      .select {
        padding-right: 15px;
        width: 200px;
      }

      .picker {
        margin-right: 15px;
        width: 300px;
      }
    }

    .content{
      .title{
        margin-bottom: 20px;
      }
      .value{
        padding: 10px 30px;
      }
    }
  }

  .margin-top-20{
    margin-top: 40px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
